import { useState, useEffect } from 'react'
import bus from '../../../../utils/eventBus'
import Template1 from '../../../../assets/system/template/1.png'
import Template2 from '../../../../assets/system/template/2.png'
import Template3 from '../../../../assets/system/template/3.png'
import DownIcon from '../../../../assets/system/template/down-icon.png'
import { message } from 'antd'
import './index.scss'
const TemplateConfig = () => {
    const [cdList, setCdList] = useState<any[]>([])
    const handleDown = (data: any) => {
        const params = {
            file: data.file
        }
        window.chromePro.exportNetBurnerCover(JSON.stringify(params))
    }
    const getNetBurnerCoverTemplateFinished = (res: any) => {
        if (res.code === 200) {
            setCdList([...res.data])
        } else {
            setCdList([])
        }
    }
    const exportNetBurnerCoverFinished = (res: any) => {
        if (res.code === 200) {
            message.success(res.msg)
        } else {
            message.error(res.msg)
        }
    }
    const loaded = ()=>{
        window.chromePro.getNetBurnerCoverTemplate()
    }
    useEffect(() => {
        bus.addListener('loaded',loaded)
        bus.addListener('getNetBurnerCoverTemplateFinished', getNetBurnerCoverTemplateFinished)
        bus.addListener('exportNetBurnerCoverFinished', exportNetBurnerCoverFinished)
    }, [])
    useEffect(() => {
        return () => {
            bus.removeListener('loaded',loaded)
            bus.removeListener('getNetBurnerCoverTemplateFinished', getNetBurnerCoverTemplateFinished)
            bus.removeListener('exportNetBurnerCoverFinished', exportNetBurnerCoverFinished)
        }
    }, [])
    return (
        <>
            <div className="template">
                <img src={Template1} style={{ height: '300px',marginTop:'300px' }} />
                <div className="drawer-content">
                    <img src={Template2} />
                    <img src={Template3} />
                    <div className="down-box">
                        <div className="tip-box">三、模板下载</div>
                        <div className="mt13 cd-box">
                            {cdList.map(item => {
                                return (
                                    <div key={item.id} className="cd-box-item">
                                        <img src={`data:image/png;base64,${item.img}`} alt="光盘" />
                                        <span className="cd-box-item-name">{item.name}</span>
                                        <div className="down-btn" onClick={() => handleDown(item)}>
                                            <img src={DownIcon} alt="下载图标" />
                                            <span>下载</span>
                                        </div>
                                    </div>
                                )
                            })}
                        </div>
                    </div>
                </div>
            </div>
        </>
    )
}

export default TemplateConfig